/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable @typescript-eslint/no-shadow */
import React, { useEffect, useState } from 'react';
import { Row, Col, Button, message, Spin } from 'antd';
import { getInfoVerifyDetail, getNext } from '@/services/operatorManagement';
import { uniqBy } from 'lodash';
import ImgCard from './ImgCard';
import styles from './detail.less';

type DetailProps = {
  id: string;
  type: number;
  goBack: (id: string) => void;
};

const initList: () => YzInfoVerify.ImageList[] = () =>
  ['1', '2', '3', '4'].map((type) => ({
    type,
    img: '',
    imgList: [],
    cm_id: '',
    id: '',
    status: '',
    update_time: '',
  }));

/**
 * 详情页
 *  */
const Detail: React.FC<DetailProps> = ({ goBack, id, type }) => {
  const [loading, setLoading] = useState(false);
  const [detailInfo, setDetailInfo] = useState<{
    innInfo: YzInfoVerify.CmInfo;
    detailList: YzInfoVerify.ImageList[];
  }>({
    innInfo: {
      inn_name: '',
      league_name: '',
      phone: '',
      id: '',
      cm_id: '',
    },
    detailList: initList(),
  });

  const getDetail = (id: string) => {
    setLoading(true);
    getInfoVerifyDetail({ id })
      .then((res) => {
        const { code, data, msg } = res;
        if (code == 0) {
          setDetailInfo((prevState) => {
            const list = uniqBy([...data?.detail, ...prevState.detailList], 'type');
            list.forEach((item) => {
              try {
                if (item.img) {
                  item.imgList = JSON.parse(item.img);
                }
              } catch (error) {
                item.imgList = [];
                console.log('parse_error', error, item.img);
              }
            });
            return {
              innInfo: {
                ...data?.audit?.cmInfo,
                id: data.audit.id,
                cm_id: data.audit.cm_id,
              },
              detailList: list,
            };
          });
        } else {
          message.error(msg);
        }
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  const getNextDetail = (id: string) => {
    getNext({ id }).then((res) => {
      if (res.data != 0) {
        getDetail(res.data);
      } else {
        message.error(res.msg);
      }
    });
  };

  useEffect(() => {
    if (id) {
      getDetail(id);
    }
  }, [id]);

  return (
    <div>
      <Spin spinning={loading}>
        <Row
          align='middle'
          justify='space-between'
          style={{ width: '100%', padding: 20, marginBottom: 30 }}
          className={styles['bg-white']}
        >
          <Col span={12}>
            <Row gutter={[0, 20]}>
              <Col span={24}>驿站账号：{detailInfo?.innInfo?.phone || '无'}</Col>
              <Col span={24}>驿站名称：{detailInfo?.innInfo?.inn_name || '无'}</Col>
            </Row>
          </Col>
          <Col span={12}>
            <Row gutter={[20, 20]} justify='end'>
              <Col>
                <Button size='large' onClick={() => goBack('')}>
                  返回列表
                </Button>
              </Col>
              {type == 1 && (
                <Col>
                  <Button
                    loading={loading}
                    size='large'
                    type='primary'
                    onClick={getNextDetail.bind(null, detailInfo?.innInfo?.id)}
                  >
                    审核下一个
                  </Button>
                </Col>
              )}
            </Row>
          </Col>
        </Row>
        <Row
          style={{ width: '100%', padding: 20, margin: 0 }}
          className={styles['bg-white']}
          gutter={[30, 0]}
        >
          {detailInfo.detailList.map((item) => (
            <Col key={item.type} xs={24} md={12} lg={6}>
              <ImgCard data={item} />
            </Col>
          ))}
        </Row>
      </Spin>
    </div>
  );
};

export default Detail;
